import { Navigation } from "@/components/navigation";
import { SearchRides } from "@/components/search-rides";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Clock, MapPin, Users } from "lucide-react";

const rides = [
  {
    id: 1,
    driver: {
      name: "张先生",
      avatar: "https://i.pravatar.cc/150?img=1",
      rating: 4.8
    },
    departure: "北京市朝阳区",
    destination: "天津市南开区",
    date: "2024-02-20",
    time: "09:00",
    seats: 3,
    price: 100
  },
  {
    id: 2,
    driver: {
      name: "李女士",
      avatar: "https://i.pravatar.cc/150?img=2",
      rating: 4.9
    },
    departure: "上海市浦东新区",
    destination: "苏州市姑苏区",
    date: "2024-02-20",
    time: "14:00",
    seats: 4,
    price: 80
  }
];

export default function RidesPage() {
  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      
      <main className="container mx-auto px-4 pt-24 pb-16">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl font-bold text-center mb-8">找车</h1>
          
          <div className="mb-8">
            <SearchRides />
          </div>

          <div className="space-y-4">
            {rides.map((ride) => (
              <Card key={ride.id}>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <Avatar>
                        <AvatarImage src={ride.driver.avatar} />
                        <AvatarFallback>{ride.driver.name[0]}</AvatarFallback>
                      </Avatar>
                      <div>
                        <CardTitle className="text-lg">{ride.driver.name}</CardTitle>
                        <p className="text-sm text-muted-foreground">
                          评分：{ride.driver.rating}
                        </p>
                      </div>
                    </div>
                    <div className="text-2xl font-bold text-primary">
                      ¥{ride.price}
                    </div>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <MapPin className="h-4 w-4 text-muted-foreground" />
                        <span>出发：{ride.departure}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <MapPin className="h-4 w-4 text-muted-foreground" />
                        <span>到达：{ride.destination}</span>
                      </div>
                    </div>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Clock className="h-4 w-4 text-muted-foreground" />
                        <span>{ride.date} {ride.time}</span>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Users className="h-4 w-4 text-muted-foreground" />
                        <span>剩余座位：{ride.seats}</span>
                      </div>
                    </div>
                  </div>
                  <Button className="mt-4 w-full">预约座位</Button>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}